<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.14/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-model是一个语法糖,实现双向数据绑定 -->
        <!-- 使用v-model,在原生的标签使用 -->
        <!-- <input v-model="username"/> -->
        <!-- 双向数据绑定 -->
        <!-- 从页面到数据,通过v-bind:属性名,简写: -->
        <!-- 从数据到页面,通过v-on:事件名,简写@ -->
        <!-- <input v-bind:value="username" v-on:input="username = $event.target.value"/> -->
        <!-- <input :value="username" @input="username = $event.target.value"/> -->

        <!-- v-model是一个语法糖,用简化父子通信,父组件模板 -->
        <van-field v-model="username"></van-field>
        <!-- <van-field :value="username" @input="username = $event"></van-field> -->
    </div>
</body>
<script>
Vue.component('van-field',{
    props: ['value'],
    template: `
        <div>
            <input :value="value" @input="$emit('input', $event.target.value)"/>    
        </div>
    `
})
let vm = new Vue({
    el: '#app',
    data(){
        return {
            username: 'zs'
        }
    }
})
</script>
</html>